<template>
  <div id="searchDiv">
    <input placeholder=" 请输入搜索内容..." id="searchInput" v-model="searchCentent">
    <button id="searchButt" @click="searchStart">搜索人物</button>
  </div>
</template>

<script>
  import PubSub from 'pubsub-js'

  export default {
    name: "search",
    data() {
      return {
        searchCentent: ""
      }
    },
    methods: {
      searchStart() {
        const searchCentent = this.searchCentent.trim();
        //判断搜索内容不能为空
        if (searchCentent) {
          //发布消息，定义消息key，传递搜索内容参数
          PubSub.publishSync("search", searchCentent);
        }
      }
    }
  }
</script>

<style scoped>

  #searchDiv {
    border: 1px solid silver;
    width: 500px;
    margin-left: 35%;
    margin-bottom: 20px;
  }

  #searchInput {
    height: 30px;
    width: 400px;
    margin: 5px 2px;
  }

  #searchButt {
    height: 30px;
    background-color: #fbf9ff
  }
</style>
